<template>
  <div class="huawei-home">
    <!-- 1. 顶部大图轮播区 -->
    <section class="hero-banner">
      <el-carousel :interval="5000" height="600px" indicator-position="outside">
        <el-carousel-item v-for="(banner, index) in banners" :key="index">
          <div class="banner-content" :style="{ background: banner.background }">
            <div class="banner-container">
              <div class="banner-text">
                <h1>{{ banner.title }}</h1>
                <p class="slogan">{{ banner.slogan }}</p>
                <p class="description">{{ banner.description }}</p>
              </div>
              <div class="banner-image">
                <img :src="banner.image" :alt="banner.title">
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </section>

    <!-- 2. 产品特性展示区 -->
    <section class="features-section">
      <div class="section-container">
        <h2 class="section-title">产品特性</h2>
        <el-row :gutter="30">
          <el-col :span="6" v-for="feature in features" :key="feature.id">
            <div class="feature-card">
              <div class="feature-icon" :style="{ background: feature.color }">
                <span>{{ feature.icon }}</span>
              </div>
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </section>

    <!-- 3. 热门产品推荐区 -->
    <section class="hot-products-section">
      <div class="section-container">
        <div class="section-header">
          <h2 class="section-title">热门产品</h2>
          <p class="section-subtitle">探索华为全系列智能设备</p>
        </div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="product in hotProducts" :key="product.id">
            <el-card class="product-card" shadow="hover" @click="viewProduct(product.id)">
              <div class="product-image-container">
                <img :src="product.image" :alt="product.name" class="product-image">
                <div class="product-badge" v-if="product.isNew">新品</div>
              </div>
              <div class="product-info">
                <h3>{{ product.name }}</h3>
                <p class="product-desc">{{ product.description }}</p>
                <div class="product-price">
                  <span class="current-price">¥{{ product.price }}</span>
                  <span class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</span>
                </div>
                <div class="product-actions">
                  <el-button type="primary" size="small">查看详情</el-button>
                  <el-button type="success" size="small">加入购物车</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </section>

    <!-- 4. 技术优势展示区 -->
    <section class="tech-section">
      <div class="section-container">
        <h2 class="section-title">技术优势</h2>
        <div class="tech-grid">
          <div class="tech-item" v-for="tech in technologies" :key="tech.id">
            <div class="tech-content">
              <h3>{{ tech.title }}</h3>
              <p>{{ tech.description }}</p>
            </div>
            <div class="tech-image">
              <img :src="tech.image" :alt="tech.title">
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 5. 品牌故事区 -->
    <section class="brand-story">
      <div class="story-container">
        <div class="story-content">
          <h2>华为品牌故事</h2>
          <p>华为致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界。</p>
          <p>我们坚持开放合作、持续创新，为客户创造价值，为世界带来更多可能。</p>
          <el-button type="primary" size="large">了解更多品牌故事</el-button>
        </div>
        <div class="story-image">
          <img src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27MF8xNzI4MTA5NzA2Ljg3MzQ2OA%3D%3D%27/0.png">
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 轮播图数据
const banners = ref([
  {
    title: 'HUAWEI Mate 70 Pro+',
    slogan: '超光变XMAGE影像，鸿蒙操作系统',
    description: '旗舰影像手机，带来前所未有的摄影体验',
    image: 'https://qcloud.dpfile.com/pc/AlVR0CqHKdYcy3zO0nL1OugkeGdk3k5HIPLwUrxX1f9MGmi1e4xEyNRs4L93muE8.jpg',
    background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    productId: 'mate70-pro-plus'
  },
  {
    title: '华为全场景智慧生活',
    slogan: '构建万物互联的智能世界',
    description: '手机、平板、笔记本、智能穿戴全生态体验',
    image: 'https://img.36krcdn.com/hsossms/20250416/v2_1f2699e1845c40b2afbc502b8ccce903@5950193_oswg1708461oswg3997oswg2666_img_jpg?x-oss-process=image/quality,q_90/format,jpg/interlace,1',
    background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    productId: 'smart-life'
  }
])

// 产品特性数据
const features = ref([
  {
    id: 1,
    icon: '📷',
    title: '超光变XMAGE影像',
    description: '专业级摄影系统，捕捉每一个精彩瞬间',
    color: '#FF6B6B'
  },
  {
    id: 2,
    icon: '⚡',
    title: '鸿蒙操作系统',
    description: '智慧全场景，流畅体验无缝连接',
    color: '#4ECDC4'
  },
  {
    id: 3,
    icon: '🛰️',
    title: '北斗卫星消息',
    description: '无地面网络也能发送紧急消息',
    color: '#45B7D1'
  },
  {
    id: 4,
    icon: '🔋',
    title: '超长续航',
    description: '大容量电池，满足全天使用需求',
    color: '#96CEB4'
  }
])

// 热门产品数据
const hotProducts = ref([
  {
    id: 'mate70-pro-plus',
    name: 'HUAWEI Mate 70 Pro+',
    price: '7999',
    originalPrice: '8999',
    description: '旗舰影像手机，超光变XMAGE',
    image: 'https://b0.bdstatic.com/cc532dfdaa813ba383f0c3ba01d104f3.jpg',
    isNew: true
  },
  {
    id: 'p60-pro',
    name: 'HUAWEI P60 Pro',
    price: '6999',
    description: '超感知影像，艺术美学设计',
    image: 'https://img1.baidu.com/it/u=2751470341,3531781648&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=916',
    isNew: false
  },
  {
    id: 'matepad-pro',
    name: 'HUAWEI MatePad Pro',
    price: '3999',
    description: '生产力平板，智慧办公',
    image: 'https://img1.baidu.com/it/u=3571476337,302643016&fm=253&app=138&f=JPEG?w=800&h=1067',
    isNew: true
  },
  {
    id: 'watch-4',
    name: 'HUAWEI Watch 4',
    price: '2699',
    description: '智能健康手表，全天候监测',
    image: 'https://img2.baidu.com/it/u=921265174,3726265215&fm=253&app=138&f=JPEG?w=800&h=1540',
    isNew: false
  }
])

// 技术优势数据
const technologies = ref([
  {
    id: 1,
    title: 'HarmonyOS',
    description: '分布式操作系统，实现跨设备无缝协同',
    image: 'https://pic.rmb.bdstatic.com/bjh/240530/dump/4c5bcb33c6d027d3e9fa3b81b6089887.png'
  },
  {
    id: 2,
    title: 'XMAGE影像',
    description: '自研影像品牌，重新定义移动摄影',
    image: 'https://b0.bdstatic.com/bd48899cba2cebaaaf56bfb59fec8f58.jpg'
  },
  {
    id: 3,
    title: '超级快充',
    description: '快速充电技术，极速回血',
    image: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F0929%2Ff2d0f47cj00skj63k0014d200gj00plg00gj00pl.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
  }
])

const viewProduct = (productId) => {
  router.push(`/goods/${productId}`)
}

const viewDetail = (productId) => {
  ElMessage.info(`查看 ${productId} 的详细信息`)
}
</script>

<style scoped>
.huawei-home {
  background: #ffffff;
}

/* 1. 顶部大图轮播区样式 */
.hero-banner {
  margin-bottom: 0;
}

.banner-content {
  height: 100%;
  display: flex;
  align-items: center;
  color: white;
}

.banner-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  width: 100%;
}

.banner-text {
  flex: 1;
  max-width: 500px;
}

.banner-text h1 {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.slogan {
  font-size: 24px;
  margin-bottom: 15px;
  opacity: 0.9;
}

.description {
  font-size: 16px;
  margin-bottom: 30px;
  opacity: 0.8;
  line-height: 1.6;
}

.banner-actions {
  display: flex;
  gap: 20px;
}

.banner-image {
  flex: 1;
  text-align: center;
}

.banner-image img {
  max-width: 100%;
  height: 400px;
  object-fit: contain;
}

/* 2. 产品特性展示区样式 */
.features-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-title {
  text-align: center;
  font-size: 36px;
  color: #333;
  margin-bottom: 50px;
  font-weight: bold;
}

.feature-card {
  text-align: center;
  padding: 30px 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 32px;
}

.feature-card h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 15px;
}

.feature-card p {
  color: #666;
  line-height: 1.6;
}

/* 3. 热门产品推荐区样式 */
.hot-products-section {
  padding: 80px 0;
  background: white;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-subtitle {
  font-size: 18px;
  color: #666;
  margin-top: 10px;
}

.product-card {
  margin-bottom: 30px;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  border-radius: 10px;
  overflow: hidden;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.product-image-container {
  position: relative;
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #ff4757;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.product-info {
  padding: 20px;
}

.product-info h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.product-desc {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.4;
}

.product-price {
  margin-bottom: 15px;
}

.current-price {
  font-size: 20px;
  color: #c7000a;
  font-weight: bold;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
  margin-left: 10px;
}

.product-actions {
  display: flex;
  gap: 10px;
}

/* 4. 技术优势展示区样式 */
.tech-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.tech-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.tech-item {
  display: flex;
  align-items: center;
  gap: 40px;
  background: white;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.tech-item:nth-child(even) {
  flex-direction: row-reverse;
}

.tech-content {
  flex: 1;
}

.tech-content h3 {
  font-size: 24px;
  color: #333;
  margin-bottom: 15px;
}

.tech-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.learn-more {
  color: #1890ff;
  font-weight: 500;
}

.tech-image {
  flex: 0 0 200px;
}

.tech-image img {
  width: 100%;
  border-radius: 8px;
}

/* 5. 品牌故事区样式 */
.brand-story {
  padding: 80px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.story-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 0 20px;
}

.story-content {
  flex: 1;
}

.story-content h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

.story-content p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  opacity: 0.9;
}

.story-image {
  flex: 0 0 400px;
}

.story-image img {
  width: 100%;
  border-radius: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner-container {
    flex-direction: column;
    text-align: center;
  }

  .banner-text h1 {
    font-size: 32px;
  }

  .tech-item {
    flex-direction: column;
  }

  .story-container {
    flex-direction: column;
  }
}
</style>